<template>
    <ex-dialog
      width="500px"
      class="ex-diolog"
      title="注销商户"
      :visible="visible"
      @closeDialog="handleClose"
    >
      <el-form  :model="ruleForm"  class="demo-ruleForm">
        <el-form-item  >
            <div style="font-size:16px;font-weight: 600;">是否确认注销商户：<span style="font-weight: 400;">{{merchantName}}</span></div>
        </el-form-item>
        <el-form-item label="备注：">
           <el-input v-model="ruleForm.remark" placeholder="请输入" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item >
          <el-radio  v-model="ruleForm.operateStatus" label="2">取消申请</el-radio>
          <el-radio v-model="ruleForm.operateStatus" label="1">确认注销</el-radio>
        </el-form-item>
        <el-form-item >
            <div class="dialog-footer">
               <el-button type="primary" @click="tipShow" class="primary">确认提交</el-button>
               <el-button  @click="handleClose">取消</el-button>
            </div>
        </el-form-item>
      </el-form>
        <el-dialog
        width="550px"
        :title="innerTitle"
        :visible.sync="innerVisible"
        :close-on-click-modal="false"
         append-to-body>
        <div class="confirm-cancellation" v-if="eventSatatus == 1">
            <div style="font-size: 16px;margin-bottom: 10px; display: flex; font-weight: 600;">是否确认注销商户：<div style="font-size: 16px;font-weight: 400; ">{{merchantName}}</div></div>
            <div style="font-size: 16px;margin-bottom: 10px; line-height:28px; font-weight: 600;">一旦被注销成功将不可恢复，商户将无法再使用本账号或找回添加、绑定的任何本账号内容或信息</div>
            <div style="display: flex;align-items: center;justify-content: center;margin-top: 30px;">
              <el-button type="primary" @click="handlConfirmLogOff" class="primary" style="margin-right: 20px;" :loading="loading">确认注销</el-button>
              <el-button  @click="handlCancel">取消</el-button>
           </div>
        </div>
        <div class="confirm-cancellation" v-else-if="eventSatatus == 2">
            <div style="font-size: 16px;margin-bottom: 10px; display: flex;flex-wrap: wrap;line-height:26px;font-weight: 600;">是否确认取消商户：<div style="font-size: 16px;  font-weight: 400;">{{merchantName}}注销申请</div></div>
            <!-- <div style="font-size: 16px;margin-bottom: 10px;">一旦被注销成功将不可恢复，商户将无法再使用本账号或找回添加、绑定的任何本账号内容或信息</div> -->
            <div style="display: flex;align-items: center;justify-content: center;margin-top: 30px;">
              <el-button type="primary" @click="handlConfirmLogOff" class="primary" style="margin-right: 20px;" :loading="loading">确认取消</el-button>
              <el-button  @click="handlCancel">取消</el-button>
           </div>
        </div>
        <div class="confirm-cancellation" v-else-if="eventSatatus == 3">
            <div style="font-size: 16px;margin-bottom: 10px; display: flex;font-weight: 600;">商户：<div style="font-size: 16px;font-weight: 400; ">{{merchantName}}</div></div>
            <div style="font-size: 16px;margin-bottom: 10px; font-weight: 600;">存管账户中存在余额，清空余额后再试</div>
        </div>
      </el-dialog>
    </ex-dialog>
  </template>
  <script>
  // api
  import { getDetail } from '@/api/regitserVerify'
  import { logoutV1LogOffExamine,logoutV1GetCustomerAssetStatus } from "@/api/merchants/cancelAudit";
  export default {
    name: 'BeeTokenSystemH5AncelMerchant',
    props: {
      visible: Boolean,
      id: String,
      merchantName: String,
      merchantId: String,
    },
    data() {
      return {
        innerTitle:'确认注销商户',
        innerVisible: false,
        loading:false,
        eventSatatus: '', // 1 是否确认注销商户
        // 数据详情
        ruleForm:{
          remark:'',
          operateStatus:'2'
        },
        rules: {
            remark: [
              { required: true, message: '请选择盲盒活动类型',trigger: 'blur'} 
            ],
          }, 
      }
    },
    created() {
     
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false)
      },
      // 取消
      handlCancel(){
        this.innerVisible = false
        // this.$emit('update:visible', false)
      },
      // 
      tipShow(){
        this.eventSatatus = this.ruleForm.operateStatus
        this.innerVisible = true
        if(this.eventSatatus == 1) {
          this.innerTitle = '确认注销商户'
        }else if(this.eventSatatus == 2){
          this.innerTitle = '取消注销申请'
        }
      },
      //确认取消 
      async handlConfirmLogOff(){
        if(this.eventSatatus == 1){
            this.loading = true
            try {
                var res = await logoutV1GetCustomerAssetStatus({merchantId:this.merchantId})
              if(res.result.status == 2){
                 setTimeout(()=>{
                  this.loading = false
                  this.logOffClick()
                 },1000)
              }else{
                this.getConfirmLogOff()
              }
            } catch (error) {
              this.loading = false
            }
        }else{
           this.getConfirmLogOff()
        }

      },
      // 注销审核
      getConfirmLogOff(){
          var data = {
            ...this.ruleForm,
            id:this.id
          }
          this.loading = true
          logoutV1LogOffExamine(data).then(res=>{
            setTimeout(()=>{
                this.$message({
                  message: res.message,
                  type: "success",
                  duration: 1500,
                });
                this.$emit('success')
                this.loadding = false
            },1000)

          }).catch(err=>{
            this.loading = false
          })
      },
      // 注销商户失败
      logOffClick(){
        this.eventSatatus = 3
        this.innerVisible = true
        this.innerTitle = '注销商户失败'
      },
    }
  }
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0;
    }
    ::v-deep .ex--dialog--main{
      padding:20px 30px;
    }
    ::v-deep .el-form-item{
      margin-bottom: 15px;
    }
    .primary{
        margin-right: 20px;
      }
      .dialog-footer{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
      .confirm-cancellation{
        .cc-w01{
          font-size: 17px;
          margin-bottom: 10px;
        }
        .dialog-footer{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin-top: 10px;
        }
      }
  }
  </style>
  